<!DOCTYPE html>
<head>
	<title>DT Validator首页、文档、示例和下载 - DESTINY Validator、文档、示例和下载 - jQuery 前端验证 - 大连首闻科技有限公司</title>
	<meta name="Keywords" content="DT Validator,DESTINY Validator,DT Validator是什么,DT Validator示例,DT Validator下载,前端验证插件,JavaScript,跨平台,jQuery验证插件"/>
	<meta name="Description" content="DESTINY Validator（DT Validator）是一款由大连首闻科技有限公司自主研发的基于MIT开源协议的前端验证组件，拥有使用简单、功能强大、跨浏览器支持、程序思路清晰、高效加载等众多优秀素质。"/>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<!-- favicon -->
	<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
	<!-- jQuery -->
	<script type="text/javascript" src="../dependents/jquery/jquery.min.js"></script>
	<!-- bootstrap -->
	<script type="text/javascript" src="../dependents/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../dependents/bootstrap/css/bootstrap.min.css" />
	<!--[if lt IE 9]>
		<script src="../dependents/bootstrap/plugins/ie/html5shiv.js"></script>
		<script src="../dependents/bootstrap/plugins/ie/respond.js"></script>
	<![endif]-->
	<!--[if lt IE 8]>
		<script src="../dependents/bootstrap/plugins/ie/json2.js"></script>
	<![endif]-->
	<!-- font-awesome -->
	<link rel="stylesheet" type="text/css" href="../dependents/fontAwesome/css/font-awesome.min.css" media="all" />
	<!-- dtvalidator -->
	<script type="text/javascript" src="../jquery.dtValidator.min.js"></script>
	<script type="text/javascript" src="../i18n/zh-cn.js"></script>
	<link rel="stylesheet" type="text/css" href="../jquery.dtValidator.min.css" />
	<!-- datePicker -->
	<script type="text/javascript" src="../dependents/datePicker/WdatePicker.js" defer="defer"></script>
	<link rel="stylesheet" type="text/css" href="../dependents/datePicker/skin/WdatePicker.css" />
	<link rel="stylesheet" type="text/css" href="../dependents/datePicker/skin/default/datepicker.css" />
	<!-- toTop -->
	<script type="text/javascript" src="toTop/jquery.toTop.js"></script>
	<link rel="stylesheet" type="text/css" href="toTop/jquery.toTop.css" />
	<!-- syntaxHighLighter -->
	<script type="text/javascript" src="syntaxHighLighter/scripts/shCore.js"></script>
	<script type="text/javascript" src="syntaxHighLighter/scripts/shBrushBash.js"></script>
	<script type="text/javascript" src="syntaxHighLighter/scripts/shBrushXml.js"></script>
	<script type="text/javascript" src="syntaxHighLighter/scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="syntaxHighLighter/scripts/shBrushCss.js"></script>
	<link rel="stylesheet" type="text/css" href="syntaxHighLighter/styles/shCore.css" />
	<link rel="stylesheet" type="text/css" href="syntaxHighLighter/styles/shThemeDefault.css" />
	<!-- jquery pin -->
	<script type="text/javascript" src="jquery.pin/jquery.pin.js"></script>
	<!-- doc css -->
	<link rel="stylesheet" type="text/css" href="css/doc.css" />
	<!-- icon css -->
	<link rel="stylesheet" type="text/css" href="css/icons.css" />
	<script type="text/javascript">
	$(function(){
		//语法着色
		SyntaxHighlighter.config.clipboardSwf = 'syntaxHighLighter/scripts/clipboard.swf';
		SyntaxHighlighter.all();
		//钉住菜单
		$(".left-sider").pin({
			minWidth: 992
		});
		//左侧菜单注册事件
		$(".left-sider>ul>li>a").toggle(function(){
			$(this).children('i').removeClass('fa-caret-right').addClass('fa-caret-down');
			$(this).next('ul').slideDown(200);
		}, function(){
			$(this).children('i').removeClass('fa-caret-down').addClass('fa-caret-right');
			$(this).next('ul').slideUp(200);
		});
		//左侧菜单除了第一个全部关闭
		$(".left-sider>ul>li>ul:not(:first)").hide();
		$(".left-sider>ul>li>a:first").click();
	});
	</script>
</head>
<body>
	<header class="navbar navbar-inverse navbar-absolute-top" role="banner">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
					<span class="sr-only">工具</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a href="http://www.dtvalidator.com" class="navbar-brand">
					<i class="icon icon-destiny-validator"></i>&nbsp;&nbsp;DESTINY Validator
				</a>
			</div>
			<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
				<ul class="nav navbar-nav">
					<li id="nav_home">
						<a href="index.html"><i class="fa fa-home"></i>&nbsp;&nbsp;首页</a>
					</li>
					<li id="nav_example" class="active">
						<a href="example.html"><i class="fa fa-table"></i>&nbsp;&nbsp;示例</a>
					</li>
					<li id="nav_document">
						<a href="document.html"><i class="fa fa-file-text-o"></i>&nbsp;&nbsp;文档</a>
					</li>
					<li id="nav_download">
						<a href="download.html"><i class="fa fa-download"></i>&nbsp;&nbsp;下载</a>
					</li>
					<li id="nav_about">
						<a href="about.html"><i class="fa fa-info"></i>&nbsp;&nbsp;关于</a>
					</li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li id="nav_donate" class="donate">
						<a href="donate.html"><i class="fa fa-usd"></i>&nbsp;&nbsp;捐助DT Validator</a>
					</li>
				</ul>
			</nav>
		</div>
	</header>
	<div class="container">
		<div class="col-md-3">
			<div class="layout left-sider">
				<ul>
					<li>
						<a href="#2.1"><i class="fa fa-caret-right"></i>&nbsp;&nbsp;Form控件</a>
						<ul>
							<li><a href="#2.1.1">文本框验证 Text</a></li>
							<li><a href="#2.1.2">单选框验证 Radio</a></li>
							<li><a href="#2.1.3">复选框验证 Checkbox</a></li>
							<li><a href="#2.1.4">下拉框验证 Select</a></li>
							<li><a href="#2.1.5">多选下拉框验证 Multiple Select</a></li>
							<li><a href="#2.1.6">文本域验证 Textarea</a></li>
						</ul>
					</li>
					<li>
						<a href="#2.2"><i class="fa fa-caret-right"></i>&nbsp;&nbsp;验证类型</a>
						<ul>
							<li><a href="#2.2.1">必填/必选 Require</a></li>
							<li><a href="#2.2.2">格式验证 Format</a></li>
							<li><a href="#2.2.3">长度验证 Length</a></li>
							<li><a href="#2.2.4">大小验证 Max/Mix</a></li>
						</ul>
					</li>
					<li>
						<a href="#2.3"><i class="fa fa-caret-right"></i>&nbsp;&nbsp;特殊验证</a>
						<ul>
							<li><a href="#2.3.1">密码框验证 Password</a></li>
							<li><a href="#2.3.2">身份证验证 Card</a></li>
							<li><a href="#2.3.3">唯一验证 Unique</a></li>
						</ul>
					</li>
					<li>
						<a href="#2.4"><i class="fa fa-caret-right"></i>&nbsp;&nbsp;自定义</a>
						<ul>
							<li><a href="#2.4.1">自定义样式</a></li>
							<li><a href="#2.4.2">自定义元素解析</a></li>
							<li><a href="#2.4.3">自定义验证</a></li>
						</ul>
					</li>
					<li>
						<a href="#2.5"><i class="fa fa-caret-right"></i>&nbsp;&nbsp;其他示例</a>
						<ul>
							<li><a href="#2.5.1">国际化</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div class="col-md-9">
			<div class="layout main-container">
				<div id="2.1" class="title">2.1 Form控件</div>
				<hr />
				<div id="2.1.1" class="sub-title">文本框验证 Text</div>
				<p>DT Validator对于Text文本框支持<code>必填</code>、<code>格式</code>、<code>长度</code>、<code>大小</code>的验证。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_1_1;
function submit_2_1_1(){
	if(!validator_2_1_1.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_1_1 = $('#form_2_1_1').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_1_1" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;文本必填：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_1_1_1" name="test_2_1_1_1" class="form-control" valid="r" 
				validTitle="文本必填测试内容" validInfoArea="test_2_1_1_1_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_1_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;Email格式：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_1_1_2" name="test_2_1_1_2" class="form-control" valid="email" 
				validTitle="Email格式测试内容" validInfoArea="test_2_1_1_2_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_1_2_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;文本长度：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_1_1_3" name="test_2_1_1_3" class="form-control" valid="le4-le20" 
				validTitle="文本长度测试内容" validInfoArea="test_2_1_1_3_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_1_3_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;文本大小：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_1_1_4" name="test_2_1_1_4" class="form-control" valid="double|me100-me200" 
				validTitle="文本大小测试内容" validInfoArea="test_2_1_1_4_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_1_4_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;文本综合：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_1_1_5" name="test_2_1_1_5" class="form-control" valid="r|english|l-le20" 
				validTitle="文本综合测试内容" validInfoArea="test_2_1_1_5_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_1_5_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_1_1();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_1_1;
				function submit_2_1_1(){
					if(!validator_2_1_1.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_1_1 = $('#form_2_1_1').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_1_1" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">文本必填：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_1_1_1" name="test_2_1_1_1" class="form-control" valid="r" 
									validTitle="文本必填测试内容" validInfoArea="test_2_1_1_1_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_1_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">Email格式：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_1_1_2" name="test_2_1_1_2" class="form-control" valid="email" 
									validTitle="Email格式测试内容" validInfoArea="test_2_1_1_2_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_1_2_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">文本长度：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_1_1_3" name="test_2_1_1_3" class="form-control" valid="le4-le20" 
									validTitle="文本长度测试内容" validInfoArea="test_2_1_1_3_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_1_3_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">文本大小：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_1_1_4" name="test_2_1_1_4" class="form-control" valid="double|me100-me200" 
									validTitle="文本大小测试内容" validInfoArea="test_2_1_1_4_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_1_4_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">文本综合：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_1_1_5" name="test_2_1_1_5" class="form-control" valid="r|english|l-le20" 
									validTitle="文本综合测试内容" validInfoArea="test_2_1_1_5_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_1_5_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_1_1();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<p>对于格式验证中的现有提供格式和扩展，请参照参考文档中的<code>valid</code>属性。</p>
				<div id="2.1.2" class="sub-title">单选框验证 Radio</div>
				<p>DT Validator对于Radio单选框支持<code>必选</code>的验证。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_1_2;
function submit_2_1_2(){
	if(!validator_2_1_2.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_1_2 = $('#form_2_1_2').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_1_2" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;性别：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;label class="radio-inline"&gt;
				&lt;input type="radio" name="test_2_1_2_1" value="0" valid="r" validTitle="性别" validInfoArea="test_2_1_2_1_info_area" /&gt; 男
			&lt;/label&gt;
			&lt;label class="radio-inline"&gt;
				&lt;input type="radio" name="test_2_1_2_1" value="1" valid="r" validTitle="性别" validInfoArea="test_2_1_2_1_info_area" /&gt; 女
			&lt;/label&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_2_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_1_2();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_1_2;
				function submit_2_1_2(){
					if(!validator_2_1_2.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_1_2 = $('#form_2_1_2').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_1_2" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">性别：</label>
							<div class="col-sm-4">
								<label class="radio-inline">
									<input type="radio" name="test_2_1_2_1" value="0" valid="r" validTitle="性别" validInfoArea="test_2_1_2_1_info_area" /> 男
								</label>
								<label class="radio-inline">
									<input type="radio" name="test_2_1_2_1" value="1" valid="r" validTitle="性别" validInfoArea="test_2_1_2_1_info_area" /> 女
								</label>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_2_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_1_2();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.1.3" class="sub-title">复选框验证 Checkbox</div>
				<p>DT Validator对于Checkbox复选框支持<code>必选</code>、<code>选择数量</code>的验证。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_1_3;
function submit_2_1_3(){
	if(!validator_2_1_3.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_1_3 = $('#form_2_1_3').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_1_3" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;爱好：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_1_3_1" value="0" valid="r" validTitle="爱好" validInfoArea="test_2_1_3_1_info_area" /&gt; 旅游
			&lt;/label&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_1_3_1" value="1" valid="r" validTitle="爱好" validInfoArea="test_2_1_3_1_info_area" /&gt; 球类运动
			&lt;/label&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_1_3_1" value="2" valid="r" validTitle="爱好" validInfoArea="test_2_1_3_1_info_area" /&gt; 时事新闻
			&lt;/label&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_3_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;特点：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_1_3_2" value="0" valid="le2-le3" validTitle="特点" validInfoArea="test_2_1_3_2_info_area" /&gt; 活泼
			&lt;/label&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_1_3_2" value="1" valid="le2-le3" validTitle="特点" validInfoArea="test_2_1_3_2_info_area" /&gt; 内敛
			&lt;/label&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_1_3_2" value="2" valid="le2-le3" validTitle="特点" validInfoArea="test_2_1_3_2_info_area" /&gt; 稳重
			&lt;/label&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_1_3_2" value="3" valid="le2-le3" validTitle="特点" validInfoArea="test_2_1_3_2_info_area" /&gt; 执着
			&lt;/label&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_3_2_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;综合：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_1_3_3" value="0" valid="r|le2-le3" validTitle="综合" validInfoArea="test_2_1_3_3_info_area" /&gt; T1
			&lt;/label&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_1_3_3" value="1" valid="r|le2-le3" validTitle="综合" validInfoArea="test_2_1_3_3_info_area" /&gt; T2
			&lt;/label&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_1_3_3" value="2" valid="r|le2-le3" validTitle="综合" validInfoArea="test_2_1_3_3_info_area" /&gt; T3
			&lt;/label&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_1_3_3" value="3" valid="r|le2-le3" validTitle="综合" validInfoArea="test_2_1_3_3_info_area" /&gt; T4
			&lt;/label&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_3_3_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_1_3();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_1_3;
				function submit_2_1_3(){
					if(!validator_2_1_3.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_1_3 = $('#form_2_1_3').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_1_3" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">爱好：</label>
							<div class="col-sm-4">
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_1_3_1" value="0" valid="r" validTitle="爱好" validInfoArea="test_2_1_3_1_info_area" /> 旅游
								</label>
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_1_3_1" value="1" valid="r" validTitle="爱好" validInfoArea="test_2_1_3_1_info_area" /> 球类运动
								</label>
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_1_3_1" value="2" valid="r" validTitle="爱好" validInfoArea="test_2_1_3_1_info_area" /> 时事新闻
								</label>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_3_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">特点：</label>
							<div class="col-sm-4">
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_1_3_2" value="0" valid="le2-le3" validTitle="特点" validInfoArea="test_2_1_3_2_info_area" /> 活泼
								</label>
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_1_3_2" value="1" valid="le2-le3" validTitle="特点" validInfoArea="test_2_1_3_2_info_area" /> 内敛
								</label>
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_1_3_2" value="2" valid="le2-le3" validTitle="特点" validInfoArea="test_2_1_3_2_info_area" /> 稳重
								</label>
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_1_3_2" value="3" valid="le2-le3" validTitle="特点" validInfoArea="test_2_1_3_2_info_area" /> 执着
								</label>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_3_2_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">综合：</label>
							<div class="col-sm-4">
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_1_3_3" value="0" valid="r|le2-le3" validTitle="综合" validInfoArea="test_2_1_3_3_info_area" /> T1
								</label>
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_1_3_3" value="1" valid="r|le2-le3" validTitle="综合" validInfoArea="test_2_1_3_3_info_area" /> T2
								</label>
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_1_3_3" value="2" valid="r|le2-le3" validTitle="综合" validInfoArea="test_2_1_3_3_info_area" /> T3
								</label>
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_1_3_3" value="3" valid="r|le2-le3" validTitle="综合" validInfoArea="test_2_1_3_3_info_area" /> T4
								</label>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_3_3_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_1_3();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.1.4" class="sub-title">下拉框验证 Select</div>
				<p>DT Validator对于Select下拉框支持<code>必选</code>的验证。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_1_4;
function submit_2_1_4(){
	if(!validator_2_1_4.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_1_4 = $('#form_2_1_4').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_1_4" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;性别：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;select class="form-control" id="test_2_1_4_1" name="test_2_1_4_1" valid="r" validTitle="性别" validInfoArea="test_2_1_4_1_info_area"&gt;
				&lt;option value=""&gt;请选择&lt;/option&gt;
				&lt;option value="0"&gt;男&lt;/option&gt;
				&lt;option value="1"&gt;女&lt;/option&gt;
			&lt;/select&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_4_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_1_4();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_1_4;
				function submit_2_1_4(){
					if(!validator_2_1_4.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_1_4 = $('#form_2_1_4').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_1_4" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">性别：</label>
							<div class="col-sm-4">
								<select class="form-control" id="test_2_1_4_1" name="test_2_1_4_1" valid="r" validTitle="性别" validInfoArea="test_2_1_4_1_info_area">
									<option value="">请选择</option>
									<option value="0">男</option>
									<option value="1">女</option>
								</select>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_4_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_1_4();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<p class="attention">注意：仅当选择的选项有值时必选验证才会通过，对于初始的空值选项，如“请选择”等内容，则不被作为选择，若第一项为全部，请使用特殊值代替，如“all”。</p>
				<div id="2.1.5" class="sub-title">多选下拉框验证 Multiple Select</div>
				<p>DT Validator对于Multiple Select多选下拉框支持<code>必选</code>、<code>选择数量</code>的验证。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_1_5;
function submit_2_1_5(){
	if(!validator_2_1_5.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_1_5 = $('#form_2_1_5').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_1_5" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;爱好：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;select id="test_2_1_5_1" name="test_2_1_5_1" class="form-control" multiple="multiple" valid="r" validTitle="爱好" validInfoArea="test_2_1_5_1_info_area"&gt;
				&lt;option value="0"&gt;旅游&lt;/option&gt;
				&lt;option value="1"&gt;球类运动&lt;/option&gt;
				&lt;option value="2"&gt;时事新闻&lt;/option&gt;
			&lt;/select&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_5_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;特点：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;select id="test_2_1_5_2" name="test_2_1_5_2" class="form-control" multiple="multiple" valid="le2-le3" validTitle="特点" validInfoArea="test_2_1_5_2_info_area"&gt;
				&lt;option value="0"&gt;活泼&lt;/option&gt;
				&lt;option value="1"&gt;内敛&lt;/option&gt;
				&lt;option value="2"&gt;稳重&lt;/option&gt;
				&lt;option value="3"&gt;执着&lt;/option&gt;
			&lt;/select&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_5_2_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;综合：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;select id="test_2_1_5_3" name="test_2_1_5_3" class="form-control" multiple="multiple" valid="r|le2-le3" validTitle="综合" validInfoArea="test_2_1_5_3_info_area"&gt;
				&lt;option value="0"&gt;T1&lt;/option&gt;
				&lt;option value="1"&gt;T2&lt;/option&gt;
				&lt;option value="2"&gt;T3&lt;/option&gt;
				&lt;option value="3"&gt;T4&lt;/option&gt;
			&lt;/select&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_5_3_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_1_5();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_1_5;
				function submit_2_1_5(){
					if(!validator_2_1_5.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_1_5 = $('#form_2_1_5').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_1_5" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">爱好：</label>
							<div class="col-sm-4">
								<select id="test_2_1_5_1" name="test_2_1_5_1" class="form-control" multiple="multiple" valid="r" validTitle="爱好" validInfoArea="test_2_1_5_1_info_area">
									<option value="0">旅游</option>
									<option value="1">球类运动</option>
									<option value="2">时事新闻</option>
								</select>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_5_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">特点：</label>
							<div class="col-sm-4">
								<select id="test_2_1_5_2" name="test_2_1_5_2" class="form-control" multiple="multiple" valid="le2-le3" validTitle="特点" validInfoArea="test_2_1_5_2_info_area">
									<option value="0">活泼</option>
									<option value="1">内敛</option>
									<option value="2">稳重</option>
									<option value="3">执着</option>
								</select>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_5_2_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">综合：</label>
							<div class="col-sm-4">
								<select id="test_2_1_5_3" name="test_2_1_5_3" class="form-control" multiple="multiple" valid="r|le2-le3" validTitle="综合" validInfoArea="test_2_1_5_3_info_area">
									<option value="0">T1</option>
									<option value="1">T2</option>
									<option value="2">T3</option>
									<option value="3">T4</option>
								</select>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_5_3_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_1_5();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.1.6" class="sub-title">文本域验证 Textarea</div>
				<p>DT Validator对于Textarea文本框支持<code>必选</code>、<code>格式</code>、<code>长度</code>、<code>大小</code>的验证。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_1_6;
function submit_2_1_6(){
	if(!validator_2_1_6.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_1_6 = $('#form_2_1_6').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_1_6" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;文本域必填：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;textarea id="test_2_1_6_1" name="test_2_1_6_1" class="form-control" valid="r" 
				validTitle="文本域必填测试内容" validInfoArea="test_2_1_6_1_info_area"&gt;&lt;/textarea&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_6_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;英文格式：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;textarea id="test_2_1_6_2" name="test_2_1_6_2" class="form-control" valid="english" 
				validTitle="英文格式测试内容" validInfoArea="test_2_1_6_2_info_area"&gt;&lt;/textarea&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_6_2_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;文本域长度：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;textarea id="test_2_1_6_3" name="test_2_1_6_3" class="form-control" valid="le4-le20" 
				validTitle="文本域长度测试内容" validInfoArea="test_2_1_6_3_info_area"&gt;&lt;/textarea&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_6_3_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;文本域大小：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;textarea id="test_2_1_6_4" name="test_2_1_6_4" class="form-control" valid="double|me100-me200" 
				validTitle="文本域大小测试内容" validInfoArea="test_2_1_6_4_info_area"&gt;&lt;/textarea&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_6_4_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;文本域综合：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;textarea id="test_2_1_6_5" name="test_2_1_6_5" class="form-control" valid="r|english|l-le20" 
				validTitle="文本域综合测试内容" validInfoArea="test_2_1_6_5_info_area"&gt;&lt;/textarea&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_1_6_5_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_1_6();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_1_6;
				function submit_2_1_6(){
					if(!validator_2_1_6.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_1_6 = $('#form_2_1_6').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_1_6" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">文本域必填：</label>
							<div class="col-sm-4">
								<textarea id="test_2_1_6_1" name="test_2_1_6_1" class="form-control" valid="r" 
									validTitle="文本域必填测试内容" validInfoArea="test_2_1_6_1_info_area"></textarea>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_6_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">英文格式：</label>
							<div class="col-sm-4">
								<textarea id="test_2_1_6_2" name="test_2_1_6_2" class="form-control" valid="english" 
									validTitle="英文格式测试内容" validInfoArea="test_2_1_6_2_info_area"></textarea>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_6_2_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">文本域长度：</label>
							<div class="col-sm-4">
								<textarea id="test_2_1_6_3" name="test_2_1_6_3" class="form-control" valid="le4-le20" 
									validTitle="文本域长度测试内容" validInfoArea="test_2_1_6_3_info_area"></textarea>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_6_3_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">文本域大小：</label>
							<div class="col-sm-4">
								<textarea id="test_2_1_6_4" name="test_2_1_6_4" class="form-control" valid="double|me100-me200" 
									validTitle="文本域大小测试内容" validInfoArea="test_2_1_6_4_info_area"></textarea>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_6_4_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">文本域综合：</label>
							<div class="col-sm-4">
								<textarea id="test_2_1_6_5" name="test_2_1_6_5" class="form-control" valid="r|english|l-le20" 
									validTitle="文本域综合测试内容" validInfoArea="test_2_1_6_5_info_area"></textarea>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_1_6_5_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_1_6();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.2" class="title">验证类型</div>
				<hr />
				<div id="2.2.1" class="sub-title">必填/必选 Require</div>
				<p>DT Validator支持对内容的<code>必填</code>、<code>必选</code>属性的控制，控制的属性为<code>valid属性</code>，在<code>valid属性</code>中的参数中写入<code>r</code>即表示该控件在填写、选择过程中必须填写或必须选择。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_2_1;
function submit_2_2_1(){
	if(!validator_2_2_1.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_2_1 = $('#form_2_2_1').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_2_1" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;文本必填：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_1_1" name="test_2_2_1_1" class="form-control" valid="r" 
				validTitle="文本必填测试内容" validInfoArea="test_2_2_1_1_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_1_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;单选必选：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;label class="radio-inline"&gt;
				&lt;input type="radio" name="test_2_2_1_2" value="0" valid="r" validTitle="单选必选内容" validInfoArea="test_2_2_1_2_info_area" /&gt; T1
			&lt;/label&gt;
			&lt;label class="radio-inline"&gt;
				&lt;input type="radio" name="test_2_2_1_2" value="1" valid="r" validTitle="单选必选内容" validInfoArea="test_2_2_1_2_info_area" /&gt; T2
			&lt;/label&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_1_2_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;多选必选：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_2_1_3" value="0" valid="r" validTitle="多选必选内容" validInfoArea="test_2_2_1_3_info_area" /&gt; T1
			&lt;/label&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_2_1_3" value="1" valid="r" validTitle="多选必选内容" validInfoArea="test_2_2_1_3_info_area" /&gt; T2
			&lt;/label&gt;
			&lt;label class="checkbox-inline"&gt;
				&lt;input type="checkbox" name="test_2_2_1_3" value="2" valid="r" validTitle="多选必选内容" validInfoArea="test_2_2_1_3_info_area" /&gt; T3
			&lt;/label&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_1_3_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;下拉必选：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;select class="form-control" id="test_2_2_1_4" name="test_2_2_1_4" valid="r" validTitle="下拉必选内容" validInfoArea="test_2_2_1_4_info_area"&gt;
				&lt;option value=""&gt;请选择&lt;/option&gt;
				&lt;option value="0"&gt;T1&lt;/option&gt;
				&lt;option value="1"&gt;T2&lt;/option&gt;
			&lt;/select&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_1_4_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;多选下拉必选：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;select id="test_2_2_1_5" name="test_2_2_1_5" class="form-control" multiple="multiple" valid="r" validTitle="多选下拉必选内容" validInfoArea="test_2_2_1_5_info_area"&gt;
				&lt;option value="0"&gt;T1&lt;/option&gt;
				&lt;option value="1"&gt;T2&lt;/option&gt;
				&lt;option value="2"&gt;T3&lt;/option&gt;
			&lt;/select&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_1_5_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;文本域必填：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;textarea id="test_2_2_1_6" name="test_2_2_1_6" class="form-control" valid="r" 
				validTitle="文本域必填测试内容" validInfoArea="test_2_2_1_6_info_area"&gt;&lt;/textarea&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_1_6_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_2_1();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_2_1;
				function submit_2_2_1(){
					if(!validator_2_2_1.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_2_1 = $('#form_2_2_1').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_2_1" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">文本必填：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_1_1" name="test_2_2_1_1" class="form-control" valid="r" 
									validTitle="文本必填测试内容" validInfoArea="test_2_2_1_1_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_1_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">单选必选：</label>
							<div class="col-sm-4">
								<label class="radio-inline">
									<input type="radio" name="test_2_2_1_2" value="0" valid="r" validTitle="单选必选内容" validInfoArea="test_2_2_1_2_info_area" /> T1
								</label>
								<label class="radio-inline">
									<input type="radio" name="test_2_2_1_2" value="1" valid="r" validTitle="单选必选内容" validInfoArea="test_2_2_1_2_info_area" /> T2
								</label>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_1_2_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">多选必选：</label>
							<div class="col-sm-4">
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_2_1_3" value="0" valid="r" validTitle="多选必选内容" validInfoArea="test_2_2_1_3_info_area" /> T1
								</label>
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_2_1_3" value="1" valid="r" validTitle="多选必选内容" validInfoArea="test_2_2_1_3_info_area" /> T2
								</label>
								<label class="checkbox-inline">
									<input type="checkbox" name="test_2_2_1_3" value="2" valid="r" validTitle="多选必选内容" validInfoArea="test_2_2_1_3_info_area" /> T3
								</label>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_1_3_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">下拉必选：</label>
							<div class="col-sm-4">
								<select class="form-control" id="test_2_2_1_4" name="test_2_2_1_4" valid="r" validTitle="下拉必选内容" validInfoArea="test_2_2_1_4_info_area">
									<option value="">请选择</option>
									<option value="0">T1</option>
									<option value="1">T2</option>
								</select>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_1_4_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">多选下拉必选：</label>
							<div class="col-sm-4">
								<select id="test_2_2_1_5" name="test_2_2_1_5" class="form-control" multiple="multiple" valid="r" validTitle="多选下拉必选内容" validInfoArea="test_2_2_1_5_info_area">
									<option value="0">T1</option>
									<option value="1">T2</option>
									<option value="2">T3</option>
								</select>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_1_5_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">文本域必填：</label>
							<div class="col-sm-4">
								<textarea id="test_2_2_1_6" name="test_2_2_1_6" class="form-control" valid="r" 
									validTitle="文本域必填测试内容" validInfoArea="test_2_2_1_6_info_area"></textarea>
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_1_6_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_2_1();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<p class="attention">注意：仅当选择的选项有值时必选验证才会通过，对于初始的空值选项，如“请选择”等内容，则不被作为选择，若第一项为全部，请使用特殊值代替，如“all”。</p>
				<div id="2.2.2" class="sub-title">格式验证 Format</div>
				<p>DT Validator支持内置的格式验证，这些格式验证提供扩展参数，可以很方便的便于使用者进行没有内置的验证格式进行扩展，具体的扩展方法请查阅对应参考文档相关内容。</p>
				<p>格式验证通过<code>valid属性</code>进行配置，在<code>valid属性</code>中编写相应的格式名称即可。</p>
				<p>当前支持的格式验证包含：</p>
				<p><code>email</code>：邮箱验证</p>
				<p><code>phone</code>：电话号码验证，主要应用于座机</p>
				<p><code>english_number</code>：英文或数字组合验证</p>
				<p><code>mobile</code>：手机号码验证</p>
				<p><code>url</code>：超链接验证</p>
				<p><code>money</code>：金额验证</p>
				<p><code>number</code>：数值格式验证，类似正整数，但可以加前缀0，比如0039283也是合法的</p>
				<p><code>zip</code>：邮政编码验证</p>
				<p><code>qq</code>：QQ号码验证</p>
				<p><code>integer</code>：整数验证</p>
				<p><code>double</code>：浮点数验证</p>
				<p><code>english</code>：英文字符验证</p>
				<p><code>chinese</code>：中文字符验证</p>
				<p><code>card</code>：身份证验证</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_2_2;
function submit_2_2_2(){
	if(!validator_2_2_2.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_2_2 = $('#form_2_2_2').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_2_2" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;邮箱：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_1" name="test_2_2_2_1" class="form-control" valid="r|email" 
				validTitle="邮箱" validInfoArea="test_2_2_2_1_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;座机：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_2" name="test_2_2_2_2" class="form-control" valid="r|phone" 
				validTitle="座机" validInfoArea="test_2_2_2_2_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_2_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;英文数字：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_3" name="test_2_2_2_3" class="form-control" valid="r|english_number" 
				validTitle="英文数字" validInfoArea="test_2_2_2_3_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_3_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;手机：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_4" name="test_2_2_2_4" class="form-control" valid="r|mobile" 
				validTitle="手机" validInfoArea="test_2_2_2_4_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_4_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;链接：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_5" name="test_2_2_2_5" class="form-control" valid="r|url" 
				validTitle="链接" validInfoArea="test_2_2_2_5_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_5_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;金额：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_6" name="test_2_2_2_6" class="form-control" valid="r|money" 
				validTitle="金额" validInfoArea="test_2_2_2_6_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_6_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;数值：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_7" name="test_2_2_2_7" class="form-control" valid="r|number" 
				validTitle="数值" validInfoArea="test_2_2_2_7_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_7_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;邮政编码：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_8" name="test_2_2_2_8" class="form-control" valid="r|zip" 
				validTitle="邮政编码" validInfoArea="test_2_2_2_8_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_8_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;QQ：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_9" name="test_2_2_2_9" class="form-control" valid="r|qq" 
				validTitle="QQ" validInfoArea="test_2_2_2_9_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_9_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;整数：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_10" name="test_2_2_2_10" class="form-control" valid="r|integer" 
				validTitle="整数" validInfoArea="test_2_2_2_10_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_10_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;浮点数：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_11" name="test_2_2_2_11" class="form-control" valid="r|double" 
				validTitle="浮点数" validInfoArea="test_2_2_2_11_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_11_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;英文：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_12" name="test_2_2_2_12" class="form-control" valid="r|english" 
				validTitle="英文" validInfoArea="test_2_2_2_12_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_12_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;中文：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_13" name="test_2_2_2_13" class="form-control" valid="r|chinese" 
				validTitle="中文" validInfoArea="test_2_2_2_13_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_13_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;身份证：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_2_14" name="test_2_2_2_14" class="form-control" valid="r|card" 
				validTitle="身份证" validInfoArea="test_2_2_2_14_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_2_14_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_2_2();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_2_2;
				function submit_2_2_2(){
					if(!validator_2_2_2.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_2_2 = $('#form_2_2_2').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_2_2" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">邮箱：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_1" name="test_2_2_2_1" class="form-control" valid="r|email" 
									validTitle="邮箱" validInfoArea="test_2_2_2_1_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">座机：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_2" name="test_2_2_2_2" class="form-control" valid="r|phone" 
									validTitle="座机" validInfoArea="test_2_2_2_2_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_2_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">英文数字：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_3" name="test_2_2_2_3" class="form-control" valid="r|english_number" 
									validTitle="英文数字" validInfoArea="test_2_2_2_3_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_3_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">手机：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_4" name="test_2_2_2_4" class="form-control" valid="r|mobile" 
									validTitle="手机" validInfoArea="test_2_2_2_4_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_4_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">链接：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_5" name="test_2_2_2_5" class="form-control" valid="r|url" 
									validTitle="链接" validInfoArea="test_2_2_2_5_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_5_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">金额：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_6" name="test_2_2_2_6" class="form-control" valid="r|money" 
									validTitle="金额" validInfoArea="test_2_2_2_6_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_6_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">数值：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_7" name="test_2_2_2_7" class="form-control" valid="r|number" 
									validTitle="数值" validInfoArea="test_2_2_2_7_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_7_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">邮政编码：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_8" name="test_2_2_2_8" class="form-control" valid="r|zip" 
									validTitle="邮政编码" validInfoArea="test_2_2_2_8_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_8_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">QQ：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_9" name="test_2_2_2_9" class="form-control" valid="r|qq" 
									validTitle="QQ" validInfoArea="test_2_2_2_9_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_9_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">整数：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_10" name="test_2_2_2_10" class="form-control" valid="r|integer" 
									validTitle="整数" validInfoArea="test_2_2_2_10_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_10_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">浮点数：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_11" name="test_2_2_2_11" class="form-control" valid="r|double" 
									validTitle="浮点数" validInfoArea="test_2_2_2_11_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_11_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">英文：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_12" name="test_2_2_2_12" class="form-control" valid="r|english" 
									validTitle="英文" validInfoArea="test_2_2_2_12_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_12_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">中文：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_13" name="test_2_2_2_13" class="form-control" valid="r|chinese" 
									validTitle="中文" validInfoArea="test_2_2_2_13_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_13_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">身份证：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_2_14" name="test_2_2_2_14" class="form-control" valid="r|card" 
									validTitle="身份证" validInfoArea="test_2_2_2_14_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_2_14_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_2_2();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.2.3" class="sub-title">长度验证 Length</div>
				<p>DT Validator支持字符长度的验证，验证定义通过valid参数完成，关键字包含：<code>l</code>、<code>e</code>、<code>-</code>，分别的释义为：</p>
				<p><code>l</code>：长度限制</p>
				<p><code>e</code>：是否包含等于</p>
				<p><code>-</code>：范围标识</p>
				<p>如<code>l6-le20</code>，则表示该内容的长度必须大于6到小于等于20之间。</p>
				<p class="attention">注意：中文字符按两个字节长度计算。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_2_3;
function submit_2_2_3(){
	if(!validator_2_2_3.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_2_3 = $('#form_2_2_3').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_2_3" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;长度限制：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_3_1" name="test_2_2_3_1" class="form-control" valid="r|l6-le20" 
				validTitle="长度限制内容" validInfoArea="test_2_2_3_1_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_3_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_2_3();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_2_3;
				function submit_2_2_3(){
					if(!validator_2_2_3.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_2_3 = $('#form_2_2_3').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_2_3" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">长度限制：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_3_1" name="test_2_2_3_1" class="form-control" valid="r|l6-le20" 
									validTitle="长度限制内容" validInfoArea="test_2_2_3_1_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_3_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_2_3();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.2.4" class="sub-title">大小验证 Max/Mix</div>
				<p>DT Validator支持内容大小验证，验证定义通过valid参数完成，关键字包含：<code>m</code>、<code>e</code>、<code>-</code>，分别的释义为：</p>
				<p><code>m</code>：大小限制</p>
				<p><code>e</code>：是否包含等于</p>
				<p><code>-</code>：范围标识</p>
				<p>如<code>me3-m20</code>，则表示该内容的值必须大于等于3且小于20。</p>
				<p class="attention">注意：本验证仅支持验证格式为数字类型，否则将出现不可预知的验证结果。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_2_4;
function submit_2_2_4(){
	if(!validator_2_2_4.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_2_4 = $('#form_2_2_4').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_2_4" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;大小限制：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_2_4_1" name="test_2_2_4_1" class="form-control" valid="r|double|m3-me20" 
				validTitle="大小限制内容" validInfoArea="test_2_2_4_1_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_2_4_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_2_4();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_2_4;
				function submit_2_2_4(){
					if(!validator_2_2_4.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_2_4 = $('#form_2_2_4').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_2_4" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">大小限制：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_2_4_1" name="test_2_2_4_1" class="form-control" valid="r|double|m3-me20" 
									validTitle="大小限制内容" validInfoArea="test_2_2_4_1_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_2_4_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_2_4();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.3" class="title">特殊验证</div>
				<hr />
				<div id="2.3.1" class="sub-title">密码框验证 Password</div>
				<p>DT Validator支持密码框是否相同的验证，本属性通过<code>validPassword</code>定义，在该属性中指向密码的<code>文本框id</code>来实现验证当前密码框是否同密码框内容相同，该功能主要用于重复密码的验证。对于密码复杂程度的验证，您可以通过长度验证来控制，或您可以通过扩展的形式完成复杂验证。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_3_1;
function submit_2_3_1(){
	if(!validator_2_3_1.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_3_1 = $('#form_2_3_1').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_3_1" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;密码：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="password" id="test_2_3_1_1" name="test_2_3_1_1" class="form-control" valid="r|l6-l20" 
				validTitle="密码" validInfoArea="test_2_3_1_1_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_3_1_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;重复密码：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="password" id="test_2_3_1_2" name="test_2_3_1_2" class="form-control" valid="r|l6-l20" 
				validTitle="密码" validInfoArea="test_2_3_1_2_info_area" validPassword="test_2_3_1_1" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_3_1_2_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_3_1();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_3_1;
				function submit_2_3_1(){
					if(!validator_2_3_1.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_3_1 = $('#form_2_3_1').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_3_1" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">密码：</label>
							<div class="col-sm-4">
								<input type="password" id="test_2_3_1_1" name="test_2_3_1_1" class="form-control" valid="r|l6-l20" 
									validTitle="密码" validInfoArea="test_2_3_1_1_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_3_1_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">重复密码：</label>
							<div class="col-sm-4">
								<input type="password" id="test_2_3_1_2" name="test_2_3_1_2" class="form-control" valid="r|l6-l20" 
									validTitle="密码" validInfoArea="test_2_3_1_2_info_area" validPassword="test_2_3_1_1" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_3_1_2_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_3_1();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.3.2" class="sub-title">身份证验证 Card</div>
				<p>DT Validator支持身份证号码验证，本属性通过<code>valid</code>属性中定义<code>card</code>参数实现，支持<code>15位</code>及<code>18位</code>的身份验证。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_3_2;
function submit_2_3_2(){
	if(!validator_2_3_2.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_3_2 = $('#form_2_3_2').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_3_2" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;身份证：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_3_2_1" name="test_2_3_2_1" class="form-control" valid="r|card" 
				validTitle="身份证" validInfoArea="test_2_3_2_1_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_3_2_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;15位身份证：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_3_2_2" name="test_2_3_2_2" class="form-control" valid="r|card15" 
				validTitle="身份证" validInfoArea="test_2_3_2_2_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_3_2_2_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;18位身份证：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_3_2_3" name="test_2_3_2_3" class="form-control" valid="r|card18" 
				validTitle="身份证" validInfoArea="test_2_3_2_3_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_3_2_3_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_3_2();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_3_2;
				function submit_2_3_2(){
					if(!validator_2_3_2.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_3_2 = $('#form_2_3_2').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_3_2" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">身份证：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_3_2_1" name="test_2_3_2_1" class="form-control" valid="r|card" 
									validTitle="身份证" validInfoArea="test_2_3_2_1_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_3_2_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">15位身份证：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_3_2_2" name="test_2_3_2_2" class="form-control" valid="r|card15" 
									validTitle="身份证" validInfoArea="test_2_3_2_2_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_3_2_2_info_area"></p></div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">18位身份证：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_3_2_3" name="test_2_3_2_3" class="form-control" valid="r|card18" 
									validTitle="身份证" validInfoArea="test_2_3_2_3_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_3_2_3_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_3_2();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.3.3" class="sub-title">唯一验证 Unique</div>
				<p>DT Validator支持对数据的唯一验证，唯一验证需要通过服务器端的服务创建。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:js;">var validator_2_3_3;
function submit_2_3_3(){
	if(!validator_2_3_3.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_3_3 = $('#form_2_3_3').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_3_3" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;用户代码：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_3_3_1" name="test_2_3_3_1" class="form-control" valid="r|l-le20" 
				validTitle="用户代码" validInfoArea="test_2_3_3_1_info_area" validUnique="user_code_unique_for_add" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_3_3_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10 help-block"&gt;
			说明：当您输入user_0到user_9之间的代码都将提示已被占用，模拟新增效果。
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;input type="hidden" id="user_id" name="user_id" value="0" /&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;用户代码：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_3_3_2" name="test_2_3_3_2" class="form-control" value="user_0" valid="r|l-le20" 
				validTitle="用户代码" validInfoArea="test_2_3_3_2_info_area" validUnique="user_code_unique_for_edit|user_id" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_3_3_2_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10 help-block"&gt;
			说明：当您输入user_1到user_9之间的代码都将提示已被占用，其中user_0为当前，模拟编辑效果。
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_3_3();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_3_3;
				function submit_2_3_3(){
					if(!validator_2_3_3.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_3_3 = $('#form_2_3_3').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_3_3" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">用户代码：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_3_3_1" name="test_2_3_3_1" class="form-control" valid="r|l-le20" 
									validTitle="用户代码" validInfoArea="test_2_3_3_1_info_area" validUnique="user_code_unique_for_add" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_3_3_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10 help-block">
								说明：当您输入user_0到user_9之间的代码都将提示已被占用，模拟新增效果。
							</div>
						</div>
						<div class="form-group">
							<input type="hidden" id="user_id" name="user_id" value="0" />
							<label class="col-sm-2 control-label text-right">用户代码：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_3_3_2" name="test_2_3_3_2" class="form-control" value="user_0" valid="r|l-le20" 
									validTitle="用户代码" validInfoArea="test_2_3_3_2_info_area" validUnique="user_code_unique_for_edit|user_id" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_3_3_2_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10 help-block">
								说明：当您输入user_1到user_9之间的代码都将提示已被占用，其中user_0为当前，模拟编辑效果。
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_3_3();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.4" class="title">自定义</div>
				<hr />
				<div id="2.4.1" class="sub-title">自定义样式</div>
				<p>DT Validator支持对提示内容样式的自定义，自定义的样式可以通过<code>option</code>参数中的<code>css</code>参数完成，也可以通过<code>validInfoAreaCss</code>来定制。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:css;">.valid-info-area-init{background-color:blue;color:white;}
.valid-info-area-validating{background-color:purple;}
.valid-info-area-success{background-color:green;color:white;}
.valid-info-area-error{background-color:#eaeaea;}</pre>
				<pre class="brush:js;">var validator_2_4_1;
function submit_2_4_1(){
	if(!validator_2_4_1.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	validator_2_4_1 = $('#form_2_4_1').dtValidator();
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_4_1" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;用户名称：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_4_1_1" name="test_2_4_1_1" class="form-control" valid="r|english|l6-le20" 
				validTitle="用户名称" validInfoArea="test_2_4_1_1_info_area|valid-info-area-init|valid-info-area-validating|valid-info-area-success|valid-info-area-error" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_4_1_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_4_1();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<style type="text/css">
				.valid-info-area-init{background-color:blue;color:white;}
				.valid-info-area-validating{background-color:purple;}
				.valid-info-area-success{background-color:green;color:white;}
				.valid-info-area-error{background-color:#eaeaea;}
				</style>
				<script type="text/javascript">
				var validator_2_4_1;
				function submit_2_4_1(){
					if(!validator_2_4_1.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					validator_2_4_1 = $('#form_2_4_1').dtValidator();
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_4_1" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">用户名称：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_4_1_1" name="test_2_4_1_1" class="form-control" valid="r|english|l6-le20" 
									validTitle="用户名称" validInfoArea="test_2_4_1_1_info_area|valid-info-area-init|valid-info-area-validating|valid-info-area-success|valid-info-area-error" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_4_1_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_4_1();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.4.2" class="sub-title">自定义元素解析</div>
				<p>DT Validator支持对元素解析的自定义，由于各个项目的元素结构不同，所以我们将元素的解析接口分离出来，便于开发人员进行其项目风格的定制化，目前的解析内容为bootstrap结构风格。</p>
				<p class="example-title">示例：</p>
				<pre class="brush:css;">.valid-element-init{}
.valid-element-validating{}
.valid-element-success{}
.valid-element-failure{border:1px dotted red;}</pre>
				<pre class="brush:js;">var validator_2_4_2;
function submit_2_4_2(){
	if(!validator_2_4_2.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	var option_2_4_2 = {
		css : {
			element : {
				init : 'valid-element-init',
				validating : 'valid-element-validating',
				success : 'valid-element-success',
				failure : 'valid-element-failure'
			}
		},
		elementCallback : {
			init : function(element, css){
				
			},
			validating : function(element, css){
				
			},
			success : function(element, css){
				if($(element).is(':checkbox') || $(element).is(':radio')){
					var name = $(element).attr('name');
					$('input[name='+name+']').removeClass(css.failure);
				}else{
					$(element).removeClass(css.failure);
				}
			},
			failure : function(element, css){
				if($(element).is(':checkbox') || $(element).is(':radio')){
					var name = $(element).attr('name');
					$('input[name='+name+']').addClass(css.failure);
				}else{
					$(element).addClass(css.failure);
				}
			}
		}
	};
	validator_2_4_2 = $('#form_2_4_2').dtValidator(option_2_4_2);
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_4_2" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;用户名称：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_4_2_1" name="test_2_4_2_1" class="form-control" valid="r|english|l6-le20" 
				validTitle="用户名称" validInfoArea="test_2_4_2_1_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_4_2_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_4_2();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<style type="text/css">
				.valid-element-init{}
				.valid-element-validating{}
				.valid-element-success{}
				.valid-element-failure{border:1px dotted red;}
				</style>
				<script type="text/javascript">
				var validator_2_4_2;
				function submit_2_4_2(){
					if(!validator_2_4_2.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					var option_2_4_2 = {
						css : {
							element : {
								init : 'valid-element-init',
								validating : 'valid-element-validating',
								success : 'valid-element-success',
								failure : 'valid-element-failure'
							}
						},
						elementCallback : {
							init : function(element, css){
								
							},
							validating : function(element, css){
								
							},
							success : function(element, css){
								if($(element).is(':checkbox') || $(element).is(':radio')){
									var name = $(element).attr('name');
									$('input[name='+name+']').removeClass(css.failure);
								}else{
									$(element).removeClass(css.failure);
								}
							},
							failure : function(element, css){
								if($(element).is(':checkbox') || $(element).is(':radio')){
									var name = $(element).attr('name');
									$('input[name='+name+']').addClass(css.failure);
								}else{
									$(element).addClass(css.failure);
								}
							}
						}
					};
					validator_2_4_2 = $('#form_2_4_2').dtValidator(option_2_4_2);
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_4_2" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">用户名称：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_4_2_1" name="test_2_4_2_1" class="form-control" valid="r|english|l6-le20" 
									validTitle="用户名称" validInfoArea="test_2_4_2_1_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_4_2_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_4_2();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.4.3" class="sub-title">自定义验证</div>
				<p>DT Validator支持对验证格式的扩展，扩展后可以多次使用，扩展脚本可以写在配置文件内扩展，也可以根据程序单独扩展。</p>
				<p class="example-title">示例(输入的内容必须以小写字母dt开头)：</p>
				<pre class="brush:js;">var validator_2_4_3;
function submit_2_4_3(){
	if(!validator_2_4_3.validResult()){
		return;
	}
	$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
}
$(function(){
	var option_2_4_3 = {
		validType : {
			dt_prev : /^dt.*$/
		}
	};
	$.fn.dtValidator.lang.validTypeName.dt_prev = '以dt为前缀';
	validator_2_4_3 = $('#form_2_4_3').dtValidator(option_2_4_3);
});</pre>
				<pre class="brush:xml;">&lt;form class="form-horizontal" id="form_2_4_3" method="post"&gt;
	&lt;div class="form-group"&gt;
		&lt;label class="col-sm-2 control-label text-right"&gt;测试文本：&lt;/label&gt;
		&lt;div class="col-sm-4"&gt;
			&lt;input type="text" id="test_2_4_3_1" name="test_2_4_3_1" class="form-control" valid="r|dt_prev" 
				validTitle="测试文本" validInfoArea="test_2_4_3_1_info_area" /&gt;
		&lt;/div&gt;
		&lt;div class="col-sm-6"&gt;&lt;p class="help-block" id="test_2_4_3_1_info_area"&gt;&lt;/p&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;div class="col-sm-offset-2 col-sm-10"&gt;
			&lt;button type="button" class="btn btn-primary" onclick="submit_2_4_3();"&gt;
				&lt;i class="fa fa-save"&gt;&lt;/i&gt;&nbsp;&nbsp;提交表单
			&lt;/button&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/form&gt;</pre>
				<script type="text/javascript">
				var validator_2_4_3;
				function submit_2_4_3(){
					if(!validator_2_4_3.validResult()){
						return;
					}
					$.fn.DtValidator.tools.toast('验证通过！', 'success', 3000);
				}
				$(function(){
					var option_2_4_3 = {
						validType : {
							dt_prev : /^dt.*$/
						}
					};
					$.fn.dtValidator.lang.validTypeName.dt_prev = '以dt为前缀';
					validator_2_4_3 = $('#form_2_4_3').dtValidator(option_2_4_3);
				});
				</script>
				<div class="form-container">
					<form class="form-horizontal" id="form_2_4_3" method="post">
						<div class="form-group">
							<label class="col-sm-2 control-label text-right">测试文本：</label>
							<div class="col-sm-4">
								<input type="text" id="test_2_4_3_1" name="test_2_4_3_1" class="form-control" valid="r|dt_prev" 
									validTitle="测试文本" validInfoArea="test_2_4_3_1_info_area" />
							</div>
							<div class="col-sm-6"><p class="help-block" id="test_2_4_3_1_info_area"></p></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary" onclick="submit_2_4_3();">
									<i class="fa fa-save"></i>&nbsp;&nbsp;提交表单
								</button>
							</div>
						</div>
					</form>
				</div>
				<div id="2.5" class="title">其他示例</div>
				<hr />
				<div id="2.5.1" class="sub-title">国际化</div>
				<p>DT Vadliator原生支持国际化，我们已经预置了<code>简体中文</code>、<code>繁体中文</code>、<code>英文</code>三个语言版本，您只需要在引入JS文件时引入<code>i18n</code>文件夹中的对应语言文件即可。</p>
				<p>对于需要定制的语言，您可以自己复制一份并修改语言文件内容。</p>
				<p>由于国际化演示需要在文件中引入对应的语言文件，所以我们的示例是在新页面中完成的，您可以点击下面的链接查看示例：</p>
				<p>
					<a class="btn btn-primary btn-xs" href="example.2.1.10.en.html" target="_blank">
						<i class="fa fa-check"></i>&nbsp;&nbsp;英文版
					</a>
					<a class="btn btn-primary btn-xs" href="example.2.1.10.zh-cn.html" target="_blank">
						<i class="fa fa-check"></i>&nbsp;&nbsp;简体中文版
					</a>
					<a class="btn btn-primary btn-xs" href="example.2.1.10.zh-tw.html" target="_blank">
						<i class="fa fa-check"></i>&nbsp;&nbsp;繁体中文版
					</a>
				</p>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="container copyright">
			<a href="http://www.dlshouwen.com">大连首闻科技有限公司</a>旗下产品
			&nbsp;&nbsp;
			<a href="http://dtvalidator.com">dtvalidator.com</a>
			&nbsp;&nbsp;
			<a href="javascript:void(0);">辽ICP备14014868号-5</a>
		</div>
	</div>
	<div id="back-to-top" class="back-to-top" title="回到顶部"><i class="fa fa-arrow-circle-up"></i></div>
</body>
</html>